<template>
<div class="fillContainer">
    <div>
        <el-form :inline="true" ref="add_data" :model="search_data">
            <el-form-item label="按照时间筛选：">
                <el-date-picker
                    v-model="search_data.startTime"
                    type="date"
                    placeholder="选择开始时间"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
                --
                <el-date-picker
                    v-model="search_data.endTime"
                    type="date"
                    placeholder="选择结束时间"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
                --
                    <el-button type="primary" size="small" icon="search" @click="handleSearch()">筛选</el-button>
                </el-form-item><el-form-item>
                --
            </el-form-item>
            <el-form-item>
                <el-dropdown trigger="click" @command="chooseInvisiable">
                    <span class="el-dropdown-link">
                        省略项<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="flagMyTime">投递时间</el-dropdown-item>
                        <el-dropdown-item command="flagLink">链接相关</el-dropdown-item>
                        <el-dropdown-item command="flagWriteTestTime">笔试时间</el-dropdown-item>
                        <el-dropdown-item command="flagFaceTestTime">面试时间</el-dropdown-item>
                        <el-dropdown-item command="flagSource">投递渠道</el-dropdown-item>
                        <el-dropdown-item command="flagRemark">备注</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form-item>
            <el-form-item class="btnRight">
                <el-button type="primary" size="small" icon="view" @click="handleAdd()">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table_container">
        <el-table
            v-if="tableData.length > 0"
            :data="tableData"
            style="width: 100%"
            border>
            <el-table-column align="center" prop="companyName" label="公司名" width="120">
                <template slot-scope="scope">
                    <span style="color: #00d053;">{{ scope.row.companyName }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="flagArr.flagMyTime" align="center" prop="myTime" label="投递时间" width="80">
                <template slot-scope="scope">
                    <span style="color: #f56767;">{{ String(scope.row.myTime).split('T')[0] }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="careerName" label="岗位名称" width="140">
                <template slot-scope="scope">
                    <span style="color: #00d053;">{{ scope.row.careerName }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="flagArr.flagLink" align="center" prop="link" label="链接相关" width="140">
                <template slot-scope="scope">
                    <el-link :href="getHref(scope.row.link)" type="primary" target="__blank">{{ scope.row.link }}</el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="isWriteTest" label="是否已笔试" width="90">
                <template slot-scope="scope">
                    <span style="color: #4db3ff;">{{ scope.row.isWriteTest ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="flagArr.flagWriteTestTime" align="center" prop="writeTestTime" label="笔试时间" width="80">
                <template slot-scope="scope">
                    <span style="color: #4db3ff;">{{ getTestTime(scope.row.writeTestTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="isFaceTest" label="是否已面试" width="90">
                <template slot-scope="scope">
                    <span style="color: #f56767;">{{ scope.row.isFaceTest ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="flagArr.flagFaceTestTime" align="center" prop="faceTestTime" label="面试时间" width="80">
                <template slot-scope="scope">
                    <span style="color: #4db3ff;">{{ getTestTime(scope.row.faceTestTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="flagArr.flagSource" align="center" prop="source" label="投递渠道" width="140"></el-table-column>
            <el-table-column v-if="flagArr.flagRemark" align="center" prop="remark" label="备注" width="120"></el-table-column>
            <el-table-column align="center" label="进度" width="80">
                <template slot-scope="scope">
                    <el-progress type="circle" :percentage="getPercentage(scope.row.isWriteTest, scope.row.isFaceTest)" :width="60"></el-progress>
                </template>
            </el-table-column>
            <!--  -->
            <el-table-column align="center" prop="operation" label="操作" fixed="right" width="160">
                <template slot-scope="scope">
                    <el-button
                    type="warning"
                    size="small"
                    icon="edit"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="small"
                    type="danger"
                    icon="delete"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="pagination">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="paginations.page_index"
                        :page-sizes="paginations.page_sizes"
                        :page-size="paginations.page_size"
                        :layout="paginations.layout"
                        :total="paginations.total"
                        :hide-on-single-page=true
                        >
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        
    </div>
    <Dialog :dialog="dialog" :formData="formData" @update="getProfile()"></Dialog>
</div>
</template>

<script>
import Dialog from '@/components/Dialog.vue'
export default {
    name: 'FundList',
    data() {
        return {
            flagArr: {
                flagCompanyName: true,
                flagMyTime: true,
                flagCareerName: true,
                flagLink: true,
                flagIsWriteTest: true,
                flagIsFaceTest: true,
                flagWriteTestTime: true,
                flagFaceTestTime: true,
                flagSource: true,
                flagRemark: true,
            },
            search_data: {
                startTime: '',
                endTime: ''
            },
            filterTableData: [],
            tableData: [],
            allTableData: [],
            dialog: {
                show: false,
                title: '',
                option: 'edit'
            },
            formData: {
                id: 0,
                companyName: '',
                myTime: '',
                careerName: '',
                link: '',
                isWriteTest: false,
                isFaceTest: false,
                writeTestTime: '',
                faceTestTime: '',
                source: '',
                remark: ''
            },
            paginations: {
                page_index: 1, // 当前位于
                total: 0, // 总数
                page_size: 5, // 每页显示的条数
                page_sizes: [5, 10, 15, 20],
                layout: 'total, sizes, prev, pager, next, jumper'
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            myPercentage: 0
        }
    },
    computed: {
        user() {
            return this.$store.getters.user
        },
        getDate() {
            let date = String(this.formData.myTime)
            return date
        },
    },
    created() {
        this.getProfile()
    },
    methods: {
        getTestTime(item) {
            let date = String(item).split('T')[0]
            if (date !== 'null') {
                return date
            } else {
                return ''
            }
        },
        getPercentage(isWriteTest, isFaceTest) {
            if (isWriteTest) {
                if (isFaceTest) {
                    return 50
                } else {
                    return 25
                }
            } else {
                return 0
            }
        },
        getHref(item) {
            if (item.indexOf('http') !== -1) {
                return item
            } else {
                return 'http://' + item
            }
        },
        chooseInvisiable(command) {
            this.flagArr[command] = !this.flagArr[command]
        },
        getProfile() {
            this.$axios.get('api/profiles')
            .then(res => {
                this.allTableData = res.data
                this.filterTableData = res.data
                this.setPaginations()
            })
            .catch(err => console.log(err))
        },
        setPaginations() {
            this.paginations.total = this.allTableData.length
            this.paginations.page_index = 1
            this.paginations.page_size = 5
            
            this.tableData = this.allTableData.filter((item, index) => {
                return index < this.paginations.page_size
            })
        },
        handleEdit(index, row) {
            this.dialog = {
                show: true,
                title: '修改信息',
                option: 'edit'
            }
            for (let item in this.formData) {
                this.formData[item] = row[item]
            }
        },
        handleDelete(index, row) {
            this.$axios.delete('/api/profiles/delete/' + row.id)
            .then(() => {
                this.$message('删除成功！')
                this.getProfile()
            })
        },
        handleAdd() {
            this.dialog = {
                show: true,
                title: '添加信息',
                option: 'add'
            }
            for (let item in this.formData) {
                this.formData[item] = ''
            }
        },
        handleSizeChange(page_size) {
            this.paginations.page_index = 1,
            this.paginations.page_size = page_size
            this.tableData = this.allTableData.filter((item, index) => {
                return index < page_size
            })
        },
        handleCurrentChange(page) {
            let index = this.paginations.page_size * (page - 1)
            let nums = this.paginations.page_size * page
            let tables = []
            for (let i = index; i < nums; i++) {
                if (this.allTableData[i]) {
                    tables.push(this.allTableData[i])
                }
                this.tableData = tables
            }
        },
        handleSearch() {
            if (!this.search_data.startTime || !this.search_data.endTime) {
                this.$message({
                    type: 'warning',
                    message: '请选择时间区间！'
                })
                this.getProfile()
                return
            }
            const sTime = this.search_data.startTime
            const eTime = this.search_data.endTime

            this.allTableData = this.filterTableData.filter(item => {
                let date = new Date(item.myTime)
                let time = date.getTime()
                return time >= sTime && time <= eTime
            })

            this.setPaginations()
        }
    },
    components: {
        Dialog
    }
}
</script>

<style scoped>
.fillContainer {
    width: 100%;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
}

.btnRight {
    float: right;
}

.pagination {
    text-align: right;
    margin-top: 10px;
}
</style>